<template>
<div id="signin">
  	<!--<input type="text" >
  	<input type="password">-->
<!--  		<button @click="fn">登录</button>-->
			<div id="leftContent">
					<p class="ball1">彩票分析</p>
					<p class="ball3">数据图表</p>
					<p class="ball2">业务分析</p>
					<ul>
						<li v-for="(item,key) in facvion" :key="key">
							<i :class="item.icon"></i>
							{{item.title}}
						</li>
					</ul>
			</div>
			<div id="rightContent">
				<p class="top">可米彩票</p>
				<el-form :model="userInfo" :rules="rules" ref="userInfo" class="table">
					<el-form-item prop="accountName">
						<el-input type="text" v-model="userInfo.accountName" placeholder="请输入用户名"
							class="userInput"/>
					</el-form-item>
					<el-form-item prop="password">
					<el-input type="password" v-model="userInfo.password"placeholder="请输入密码"
						class="userInput"/>
					</el-form-item>	
					<!--{{userInfo}}-->
					<p class="switch1">
						<el-switch
						active-color="#13ce66"
						inactive-color="#ff4949"
						v-model="remember"
						>
						</el-switch>记住密码
					</p>
					<el-button @click="fn" class="But">登录</el-button>
				</el-form>
			</div>
		</div>
</template>
<script type="text/javascript">
	export default{
//		created(){
//			console.log("基础路径"+this.$api.signin)
//		}
			data(){
				return{
					facvion:[{icon:'fa fa-th-large',title:'彩票咨讯'},
					{icon:'fa fa-user-o ',title:"开奖管理"},
					{icon:'fa fa-bar-chart',title:"彩票工具"},
					{icon:'fa fa-map-marker',title:'数据图表'}],
					userInfo:{},
					remember:true,
					rules:{
						accountName:[
							{required:true,message:'用户名不能为空',trigger:'blur'},
							{min:2,max:20,message:'字符区间5到20',trigger:'blur'}
						],
						password:[{required:true,message:'密码不能为空',trigger:'blur'},
								{min:5,max:16,message:'字符区间5到16',trigger:'blur'}
						]
					}
				}
			},
			methods:{
				fn(){
					this.$refs['userInfo'].validate((valid)=>{
						if(valid){
						this.$http.post(this.$api.signin,this.userInfo).
							then((res)=>{
							console.log(res)
							if(res.data.success){
								localStorage.setItem("response",JSON.stringify(res.data.response))
								localStorage.setItem("success",this.remember)
								localStorage.setItem("token",res.data.token)
								if(this.$route.query.redirect){
									this.$router.push(this.$route.query.redirect)
								}else{
									this.$router.push('/home')
								}
							}else{
								this.$message.error("登录出错")
							}
						})
					}else{
							console.log("请输入正确字符格式");
							return false;
						}
					})					
				}
			}
	}
</script>
<style lang="scss">
#signin {
	background: url(../image/loginBG.jpg) no-repeat;
	background-size:cover ;
	  position: absolute;
	  width:100% ;
	  height: 100%;
	  display: flex;
	  #rightContent{
	  	width: 30%;
	  	height: 100%;
	  	background: rgba(0,0,0,0.5);
	  	.top{
	  		font-size: 50px;
	  		font-weight: 900;
	  		color: #A9A3A1;
	  		margin-top: 25%;
	  		text-align: center;
	  	}
	  	.table{margin-top: 10%;
	  	width: 70%;
	  	margin-left:15% ;
	  		.userInput{
	  		width: 100%;
	  		margin-top: 8%;
	  		height: 40px;
	  		border-bottom: 1px solid #A9A3A1;
	  		/*el-input设置样式记得在设置.el-input__inner*/
	  		.el-input__inner 
	  			{
                    /*background:rgba(0,0,0,0);*/
 		            background: transparent;
					width: 100%;
                    border: none;
					outline: none;
					color: white;
                }
	  		}
	  		.But{
	  			width: 100%;
	  			margin-top: 20%;
	  			height: 40px;
	  			background: #25B963;
	  			border: none;
	  			color: white;
	  			margin-top: 15%;
	  		}
	  		.switch1{
	  			color: white;
	  			margin-top: 5%;
	  		}
	  	}
	  	
	  }
	  #leftContent{
	  	width: 70%;
	  	height: 100%;
	  	background: rgba(0,0,0,0.2);
	  	color: white;
	  		p{
	  			width: 13%;
	  			height: 23%;
	  			border-radius: 50%;
	  			text-align: center;
	  			line-height: 175px;
	  			font-size: 18px;
	  			position: absolute;
	  		}
	  		.ball1{
	  			background:rgba(14,110,130,0.8) ;
	  			top: 23%;
	  			left: 23%;
	  		}
	  		.ball2{
	  			background:rgba(6,179,136,0.4);
	  			top: 35%;
	  			left: 18%;
	  		}
	  		.ball3{
	  			background:rgba(133,43,52,0.6);
	  			top: 35%;
	  			left: 28%;
	  			
	  		}
	  		ul{
	  			position: absolute;
	  			bottom: 20%;
	  			list-style: none;
	  			width: 70%;
	  			height: 120px;
	  			display: flex;
	  			font-size: 20px;
	  			text-align: center;
	  			align-items: center;
	  			li{height: 120px;
	  				flex: 1;
	  				display: flex;
	  				flex-direction: column;
	  				justify-content: space-around;
	  				i{
	  					font-size: 60px;
	  					color: #A99D9C;
	  				}
	  			}
	  		}
	  	}
	  }

</style>
